<template>
	<view class="search-page">
		<!-- 搜索框 -->
		<search-bar placeholder="请输入您想要的商品" cancelButton="none" 
			@onSearchBarFocus="onSearchBarFocus"
			@onInputChanged="onInputChanged"
			@onSearchBarConfirm="onSearchBarConfirm"
			></search-bar>
			
			
		<!-- 搜索结果 -->
		<view class="suggest-list" v-if="suggestList.length">
			<block v-for="suggest in suggestList" :key="suggest.goods_id">
				<view class="suggest-item" @click="onSuggestItemClicked(suggest.goods_id)">
					<view class="suggest-title">
						{{ suggest.goods_name }}
					</view>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
			</block>
		</view>
		
		
		<!-- 搜素历史 -->
		<view class="search-history-list" v-else>
			<view class="search-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="18" @click="clearHistory"></uni-icons>
			</view>
			<block v-for="historyItem in _historyList" class="history-item-List" :key="historyItem">
				<view class="history-item" @click="onHistoryItemClicked(historyItem)">
					<uni-tag :text="historyItem"></uni-tag>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import SearchBar from '../../components/SearchBar/SearchBar.vue'
	import {
		getSearchSuggest
	} from '../../service/search_api'


	export default {
		data() {
			return {
				kw: '',
				suggestList: [],
				historyList: [],
				timer: null
			}
		},
		components: {
			SearchBar
		},
		methods: {
			onInputChanged(value) {
				if (this.timer) clearTimeout(this.timer)
				this.kw = value
				if (this.kw) {
					this.timer = setTimeout(() => {
						getSearchSuggest(this.kw).then(res => {
							if (res.meta.status === 200) {
								this.suggestList = res.message.splice(0,10)
							} else {
								uni.$showMsg()
							}
						})
					},300)
				} else {
					this.suggestList = []
				}
			},
			onSuggestItemClicked(id) {
				uni.navigateTo({
					url: '/subpkg/goods-detail/goods-detail?goods_id=' + id
				})
			},
			onSearchBarConfirm(e) {
				this.historyList.unshift(e.value)
				uni.setStorageSync('historykw',JSON.stringify(this._historyList))
			}, 
			clearHistory() {
				console.log('clearHistory');
				//	清空本地存储
				uni.setStorageSync('historykw',JSON.stringify([]))
				this.historyList = []
			},
			onHistoryItemClicked(kw) {
				uni.navigateTo({
					url: '/subpkg/goods-list/goods-list?query=' + kw
				})
			}
		},
		computed: {
			_historyList() {
				return [...new Set(this.historyList)]
			}
		},
		onLoad() {
			this.historyList = JSON.parse(uni.getStorageSync('historykw' || '[]'))
		}
	}
</script>

<style>
	.suggest-list {
		padding: 0 24rpx;
	}
	.suggest-item {
		display: flex;
		padding: 16rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f0f2f5;
	}

	.suggest-title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24rpx;
	}
	
	.uni-tag {
		background-color: red !important;
	}
	
	.search-history-list {
		padding: 16rpx;
	}
	
	.search-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		padding: 14rpx;
		border-bottom: 1px solid #f0f2f5;
	}
	
	.history-item {
		display: inline-block;
		margin: 16rpx;
		
	}
	
	.uni-tag {
		color: #e93d3b !important;
		background-color: #f0f2f5 !important;
		border: none !important;
		font-size: 24rpx !important;
	}
</style>
